<template>
  <div class="column">
    <q-page class="q-pa-sm">
      <!-- -----------第一部分---------------- -->
      <div class="col">
        <card-social icon_position="right" />
      </div>
      <!-- -----------第二部分---------------- -->
      <div class="col-6">
        <q-card class="q-mt-sm">
          <card-charts />
        </q-card>
      </div>
      <!-- -----------第三部分---------------- -->
      <div class="col-7">
        <q-card class="q-mt-sm" tyle="height: 100%">
          <q-card-section class="row" tyle="height: 100%">
            <div
              class="col-lg-7 col-sm-12 col-xs-12 col-md-7"
              tyle="height: 100%"
            >
              <!-- 图标和数值 -->
              <div class="row">
                <div class="col-lg-3 col-md-3 col-xs-6 col-sm-6">
                  <q-item>
                    <q-item-section top avatar>
                      <q-avatar color="blue" text-color="white" icon="flag" />
                    </q-item-section>
                    <q-item-section>
                      <q-item-label class="text-h6 text-blue text-bold"
                        >4321</q-item-label
                      >
                      <q-item-label caption>FCN</q-item-label>
                    </q-item-section>
                  </q-item>
                </div>
                <div class="col-lg-3 col-md-3 col-xs-6 col-sm-6">
                  <q-item>
                    <q-item-section top avatar>
                      <q-avatar color="teal-8" text-color="white" icon="flag" />
                    </q-item-section>
                    <q-item-section>
                      <q-item-label class="text-h6 text-teal-8 text-bold"
                        >9876</q-item-label
                      >
                      <q-item-label caption>SMR</q-item-label>
                    </q-item-section>
                  </q-item>
                </div>
                <div class="col-lg-3 col-md-3 col-xs-6 col-sm-6">
                  <q-item>
                    <q-item-section top avatar>
                      <q-avatar
                        color="purple-6"
                        text-color="white"
                        icon="flag"
                      />
                    </q-item-section>
                    <q-item-section>
                      <q-item-label class="text-h6 text-purple-6 text-bold"
                        >345</q-item-label
                      >
                      <q-item-label caption>FCND</q-item-label>
                    </q-item-section>
                  </q-item>
                </div>
                <div class="col-lg-3 col-md-3 col-xs-6 col-sm-6">
                  <q-item>
                    <q-item-section top avatar>
                      <q-avatar
                        color="orange-8"
                        text-color="white"
                        icon="flag"
                      />
                    </q-item-section>
                    <q-item-section>
                      <q-item-label class="text-h6 text-orange-8 text-bold"
                        >1021</q-item-label
                      >
                      <q-item-label caption>SMR_2</q-item-label>
                    </q-item-section>
                  </q-item>
                </div>
              </div>
              <!-- 条形图 -->
              <div
                ref="saleschart"
                id="saleschart"
                style="min-height: 280px; max-height: 540px"
              ></div>
            </div>

            <!-- 饼图 -->
            <div
              class="col-lg-5 col-sm-12 col-xs-12 col-md-5 column"
              tyle="height: 100%"
            >
              <q-item tyle="height: 100%">
                <q-item-section>
                  <div class="text-h6">TODAY SALES</div>
                </q-item-section>
              </q-item>
              <div
                ref="piechart"
                id="piechart"
                style="min-height: 280px; max-height: 540px"
              ></div>
            </div>
          </q-card-section>
        </q-card>
      </div>
      <!-- 第四部分 q-pa-sm -->
      <div class="" >
        <table-progress class="q-mt-lg"></table-progress>


      </div>
    </q-page>
  </div>
</template>

<script>
import { defineComponent, defineAsyncComponent, ref } from "vue";
import * as echarts from "echarts"; //这个跟以前是不一样的。
const sales_column = [
  {
    name: "Products",
    label: "Products",
    field: "Products",
    sortable: true,
    align: "left",
  },
  {
    name: "Name",
    label: "Buyer",
    field: "name",
    sortable: true,
    align: "left",
  },
  {
    name: "Total",
    label: "Total",
    field: "total",
    sortable: true,
    align: "right",
    classes: "text-bold",
  },
  {
    name: "Status",
    label: "Status",
    field: "status",
    sortable: true,
    align: "left",
    classes: "text-bold",
  },
  {
    name: "Stock",
    label: "Stock",
    field: "task",
    sortable: true,
    align: "left",
  },
];

export default defineComponent({
  name: "Dashboard2",
  components: {
    CardSocial: defineAsyncComponent(() =>
      import("../components/cards/CardSocial.vue")
    ),
    CardCharts: defineAsyncComponent(() =>
      import("../components/cards/CardCharts.vue")
    ),
    TableProgress: defineAsyncComponent(() =>
      import("../components/tables/TableProgress.vue")
    ),

    TableDarkMode: defineAsyncComponent(() =>
      import("../components/tables/TableDarkMode.vue")
    ),
  },
  setup() {
    return {
      slide: 1,
      tab: ref("contact"),
      // messages,
      // contacts,
      // sales_data,
      sales_column,
      sales_options: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Coordinate axis indicator, coordinate axis trigger is valid
            type: "shadow", // The default is a straight line, optional:'line' |'shadow'
          },
        },
        grid: {
          left: "2%",
          right: "2%",
          top: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [
              "Jan",
              "Feb",
              "Mar",
              "Apr",
              "May",
              "Jun",
              "Jul",
              "Aug",
              "Sep",
              "Oct",
              "Nov",
              "Dec",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          // {
          //   name: "Fashions",
          //   type: "bar",
          //   data: [40, 45, 27, 50, 32, 50, 70, 30, 30, 40, 67, 29],
          //   color: "#546bfa",
          // },
          {
            name: "Electronics",
            type: "bar",
            data: [124, 100, 20, 120, 117, 70, 110, 90, 50, 90, 20, 50],
            color: "#3a9688",
          },
          {
            name: "Toys",
            type: "bar",
            data: [17, 2, 0, 29, 20, 10, 23, 0, 8, 20, 11, 30],
            color: "#02a9f4",
          },
          // {
          //   name: "Vouchers",
          //   type: "bar",
          //   data: [20, 100, 80, 14, 90, 86, 100, 70, 120, 50, 30, 60],
          //   color: "#f88c2b",
          // },
        ],
      },
      pie_options: {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          bottom: 10,
          left: "center",
          data: ["Fashions", "Electronics", "Toys", "Vouchers"],
        },
        series: [
          {
            name: "Sales",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: false,
                fontSize: "30",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: 335,
                name: "Fashions",
                itemStyle: {
                  color: "#546bfa",
                },
              },
              {
                value: 310,
                name: "Electronics",
                itemStyle: {
                  color: "#3a9688",
                },
              },
              {
                value: 234,
                name: "Toys",
                itemStyle: {
                  color: "#02a9f4",
                },
              },
              {
                value: 135,
                name: "Vouchers",
                itemStyle: {
                  color: "#f88c2b",
                },
              },
            ],
          },
        ],
      },
      sales_chart: null,
      pie_chart: null,

      getColor(val) {
        if (val > 70 && val <= 100) {
          return "green";
        } else if (val > 50 && val <= 70) {
          return "blue";
        }
        return "red";
      },
      getChipColor(status) {
        if (status == "Canceled") {
          return "negative";
        } else if (status == "Sent") {
          return "positive";
        } else if (status == "Pending") {
          return "warning";
        } else if (status == "Paid") {
          return "info";
        } else {
          return "dark";
        }
      },
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let salesChart = document.getElementById("saleschart");
      echarts.dispose(salesChart);
      this.sales_chart = echarts.init(salesChart, "light");
      this.sales_chart.setOption(this.sales_options);

      let piechart = document.getElementById("piechart");
      echarts.dispose(piechart);
      this.pie_chart = echarts.init(piechart, "light");
      this.pie_chart.setOption(this.pie_options);
    },
    onResize() {
      if (this.sales_chart) {
        this.sales_chart.resize();
      }
      if (this.pie_chart) {
        this.pie_chart.resize();
      }
    },
  },
});
</script>
<style>
.table_a {
  color: rgb(233, 226, 226);
  background-color: rgb(35, 199, 67);
}
</style>
